<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<div th:fragment="banklist">
    <link rel="stylesheet"  href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/center.css"/>

    <div class="tk_nr bank_manage">
        <div class="tk_title" style="height: 72px;line-height: 72px;"><h3>银行卡管理</h3></div>

        <div class="prompt" style="display:none">
            <span><img src="/static/img/member/prompt.png"></span>
            <p>为了阁下的资金安全，在进行提款操作时，我们需要验证阁下的个人信息。<br>请尽快补全<a href="#">绑定真实姓名，手机号码，邮箱</a>等！</p>
        </div>



        <script>
            $("#bindingBank").click(function () {
                $("#bindingbankdiv").hide();
                $("#bindingbankdivtwo").show();
            })

            function delbank(obj) {
                var bankId = $(obj).attr("bankId");
                $.ajax({
                    method: "POST",
                    url: "/deleteBank",
                    data: {bankId: bankId},
                    dataType: "json"
                }).done(function (msg) {
                    if (msg.status == 'success') {
                        window.location.href = '/banklist';
                    } else {
                        alertWorning(msg.data)
                    }
                });
            }
        </script>


        <div class="manage_box_two" th:if="${not #lists.isEmpty(list)}">
            <ul th:each="item:${list}">
                <li><i class="BOC "><img></i><span th:text="${item.bankName}"></span> (尾号<span th:text="${#strings.substring(item.bankNo,#strings.length(item.bankNo)-4,#strings.length(item.bankNo))}" >12313</span>)
                    <a th:attr="bankId = ${item.bankId}" onclick="delbank(this)">删除</a></li>
            </ul>
            <div class="add_bank">
                <span id="add_bank">添加一张银行卡</span>
            </div>

            <script>
                $("#add_bank").click(function () {
                    $("#bindingbankdivtwo").show();
                })
            </script>
        </div>


        <div style="margin-bottom:30px; " class="manage_box_three" id="bindingbankdivtwo" th:style="${#lists.isEmpty(list)}? 'display:block' : 'display:none'">
            <div class="binding_info">
                <h3>添加银行卡</h3>
                <div class="bank_info">
                    <form id="bankForm">
                        <span><b>银行卡卡号:</b><input type="text" name="bankNo" class="r_inptut inputwd300"></span>
                        <span><b>持卡人姓名:</b><input th:value="${session.loginSession.realName}" name="userName" readonly="" type="text"
                                                  class="r_inptut inputwd300"></span>
                        <span><b>开户银行:</b>
                        <select id="BankType" name="bankName" class="r_inptut inputwd300">
                        <option value="中国银行">中国银行</option>
                        <option value="建设银行">建设银行</option>
                        <option value="工商银行">工商银行</option>
                        <option value="农业银行">农业银行</option>
                        <option value="招商银行">招商银行</option>
                        <option value="民生银行">民生银行</option>
                        <option value="中信银行">中信银行</option>
                        <option value="光大银行">光大银行</option>
                        <option value="兴业银行">兴业银行</option>
                        </select></span>
                        <span><b>银行支行:</b><input type="text" id="BankNo" name="branchBankName"
                                                 class="r_inptut inputwd300">

                    </span>
                    </form>
                </div>

                <div>
                    <button type="button" style="margin-left:0px;" id="addbank_bt" class="as_but inputwd300">添加银行卡
                    </button>

                    <script>


                        $("#addbank_bt").click(function () {
                            var bankForm = $("#bankForm");
                            var bankNo  = bankForm.find("input[name='bankNo']").val();
                            if(bankNo.length ==0){
                                alertWorning("银行卡号不能为空！");
                                return;
                            }
                            var branchBankName  = bankForm.find("input[name='branchBankName']").val();

                            if(branchBankName.length ==0){
                                alertWorning("银行支行不能为空！");
                                return;
                            }


                            $.ajax({
                                method: "POST",
                                url: "/addBank",
                                data: $("#bankForm").serializeArray(),
                                dataType: "json"
                            }).done(function (msg) {
                                if (msg.status == 'success') {
                                    window.location.href = '/banklist';
                                } else {
                                    alertWorning(msg.data)
                                }
                            });
                        })

                    </script>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>
